<template>
  <div class="shopPageBox">
    <BreadNav />
    <div class="shopBox bodycontent">
      <div class="shopLeft">
        <div class="imgBox">
          <ShopSwiper />
        </div>
      </div>
      <div class="shopCenter">
        <h3>
          礼拜五旗舰店
        </h3>
        <div class="shopDesc">
          <p>营业时间<span class="openTime">全天24小时</span><span class="shopPrice">￥62/人</span></p>
          <p><span class="shopPhone">10086</span></p>
          <p><span class="shopAddress">浙江温州江南皮革厂</span></p>
        </div>
        <div class="shopNotice">
          <p class="noticeTitle">商家公告：</p>
          <p class="noticeContent">本店有最新优惠活动</p>
        </div>
      </div>
      <div class="shopRight">
        <div class="ziying">
          <img src="../assets/img/ziying.png" alt="">
        </div>
        <div class="allMarkBox clear">
          <span>综合评分：</span><div class="outFill"><div class="innerFill orangeBg"></div></div><span class="allMark">4.5分</span>
        </div>
        <div class="markBox">
          <div class="descMarkBox">
            <p>描述</p>
            <p class="oneMark">4.5分</p>
          </div>
          <div class="goodsMarkBox">
            <p>商品</p>
            <p class="oneMark">4.5分</p>
          </div>
          <div class="serveMarkBox">
            <p>服务</p>
            <p class="oneMark">4.5分</p>
          </div>
        </div>
      </div>
    </div>
    <div class="bodycontent">
      <TypeTop />
    </div>
    <div class="bodycontent shopGoods">
      <div class="goodsList"><GoodsList></GoodsList></div>
      <div class="goodsList"><GoodsList></GoodsList></div>
      <div class="goodsList"><GoodsList></GoodsList></div>
      <div class="goodsList"><GoodsList></GoodsList></div>
      <div class="goodsList"><GoodsList></GoodsList></div>
      <div class="goodsList"><GoodsList></GoodsList></div>
      <div class="goodsList"><GoodsList></GoodsList></div>
      <div class="goodsList"><GoodsList></GoodsList></div>
    </div>
  </div>
</template>
<script>
import BreadNav from '@/components/BreadNav.vue';
import ShopSwiper from '@/components/ShopSwiper.vue';
import GoodsList from '@/components/GoodsList.vue';
import TypeTop from "@/components/TypeTop.vue";
export default {
  components:{
    BreadNav,
    ShopSwiper,
    GoodsList,
    TypeTop,
  },
}
</script>
<style>
  .shopBox{
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .shopLeft{
    width: 35%;
  }
  .shopLeft .imgBox{
    width: 100%;
  }
  .shopCenter{
    width: 31.25%;
  }
  .shopPrice{
    color: #f6b771;
  }
  .shopCenter h3{
    height: 70px;
    border-bottom: 1px solid #e2e2e2;
    line-height: 70px;
    font-weight: 500;
  }
  .shopDesc{
    line-height: 40px;
    padding: 9px 0;
    vertical-align: middle;
    border-bottom: 1px solid #e2e2e2;
  }
  .shopNotice{
    margin-top: 29px;
  }
  .shopNotice .noticeTitle{
    font-size: 17px;
  }
  .shopNotice .noticeContent{
    line-height: 30px;
  }
   .shopRight{
    width: 295px;
    background-color: #f4fff2;
    padding-top: 100px;
    position: relative;
    font-size: 16px;
    line-height: 30px;
  }
  .shopRight .ziying{
    position: absolute;
    width: 49px;
    height: 61px;
    top: 0;
    right: 0;
  }
  .ziying img{
    width: 100%;
    height: 100%;
  }
  .allMarkBox{
    padding-left: 20px;
  }
  .allMarkBox span{
    float: left;
  }
  .allMarkBox .outFill{
    width: 80px;
    height: 10px;
    margin-top: 10px;
    float: left;
    background-color: #ccc;
  }
  .allMarkBox .innerFill{
    width: 90%;
    height: 100%;
  }
  .allMarkBox .allMark{
    color:#f08200;
    margin-left: 10px;
  }
  .markBox{
    display: flex;
    text-align: center;
    margin-top: 20px;
  }
  .markBox>div{
    flex:1;
  }
  .oneMark{
    color:#f08200;
  }
  .goodsMarkBox{
    border-left: 2px dashed #999;
    border-right: 2px dashed #999;
  }
  .shopGoods{
    margin-top: 20px;
  }
</style>